<template>
  <!-- 统计信息展示 -->
  <el-row :gutter="12">
    <el-col :span="8">
      <SummaryCard
        title="分享人数(个)"
        class="mb-10px"
        icon="fa:user-times"
        icon-color="bg-purple-100"
        icon-bg-color="text-purple-500"
        :decimals="0"
        :value="recordSummary.userCount"
      />
    </el-col>
    <el-col :span="8">
      <SummaryCard
        title="分享红包(元)"
        class="mb-10px"
        icon="fa:user-plus"
        icon-color="bg-purple-100"
        icon-bg-color="text-purple-500"
        :decimals="0"
        :value="recordSummary.successCount"
      />
    </el-col>
    <el-col :span="8">
      <SummaryCard
        title="拉新会员(个)"
        class="mb-10px"
        icon="fa:user-plus"
        icon-color="bg-purple-100"
        icon-bg-color="text-purple-500"
        :decimals="0"
        :value="recordSummary.virtualGroupCount"
      />
    </el-col>
  </el-row>

  <!-- 分页列表数据展示 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="pageList">
      <el-table-column align="center" label="ID" prop="id" min-width="100" />
      <el-table-column label="分享人" align="left" prop="avatar" min-width="150">
        <template #default="scope">
          <div class="flex">
            <div>
              <el-image
                :preview-teleported="true"
                :src="scope.row.avatar"
                class="w-[48px]! h-[48px]! m-r-10px rounded-4px align-middle"
              />
            </div>

            <el-text>{{ scope.row.nickname }}</el-text>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机" prop="mobile" min-width="130" />
      <el-table-column align="center" label="当前身份" prop="userSize" min-width="100" />
      <el-table-column align="center" label="分享次数" prop="userCount" min-width="100" />
      <el-table-column label="获得红包" align="left" prop="avatar" min-width="150">
        <template #default="scope"> {{ scope.row.nickname }} </template>
      </el-table-column>
      <el-table-column align="center" label="拉新会员" prop="userCount" min-width="100" />
      <el-table-column align="center" label="分享排行榜" prop="userCount" min-width="100" />
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </ContentWrap>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter, defaultShortcuts } from '@/utils/formatTime'
import { createImageViewer } from '@/components/ImageViewer'
import * as CombinationRecordApi from '@/api/mall/promotion/combination/combinationRecord'
import SummaryCard from '@/components/SummaryCard/index.vue'

defineOptions({ name: 'PromotionSuperCombinationShareRecord' })

const queryParams = ref({
  status: undefined, // 拼团状态
  createTime: undefined, // 创建时间
  pageSize: 10,
  pageNo: 1,
  type: 1,
  headMember: undefined,
  member: '',
  spuName: '',
  sortType: 0, //排序类型
  sortStatus: 'up' //排序状态
})
const queryFormRef = ref() // 搜索的表单
const combinationRecordListRef = ref() // 查询表单 Ref
const loading = ref(true) // 列表的加载中
const total = ref(0) // 总记录数
const pageList = ref<CombinationRecordApi.CombinationRecordVO[]>([]) // 分页数据
// 搜索查询

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await CombinationRecordApi.getCombinationRecordPage(queryParams.value)
    pageList.value = data.list as CombinationRecordApi.CombinationRecordVO[]
    total.value = data.total
  } finally {
    loading.value = false
  }
}
// 拼团统计数据
const recordSummary = ref({
  successCount: 0,
  userCount: 0,
  virtualGroupCount: 0
})
/** 获得拼团记录统计信息 */
const getSummary = async () => {
  recordSummary.value = await CombinationRecordApi.getCombinationRecordSummary({ type: 1 })
}
/** 获得拼团用户信息 */
const options = ref<any[]>([])
const options1 = ref<any[]>([])
const getListMember = async () => {
  options.value = await CombinationRecordApi.getCombinationListMember({ headId: 0 })
  options1.value = await CombinationRecordApi.getCombinationListMember({ headId: 1 })
}

/** 查看拼团详情 */
const openRecordListDialog = (row: CombinationRecordApi.CombinationRecordVO) => {
  combinationRecordListRef.value?.open(row.headId || row.id) // 多表达式的原因，团长的 headId 为空，就是自身的情况
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}

/** 初始化 **/
onMounted(async () => {
  await getSummary()
  await getList()
  await getListMember()
})
</script>
